<!-- stories/templates/stories/home.html -->
{% extends 'stories/base.html' %}
{% load static %}

{% block title %}首页 - AI故事生成网站{% endblock %}

{% block content %}
<div class="container">
    <!-- 轮播图区域 -->
    {% if featured_stories %}
    <div class="carousel-container">
        <div class="carousel-wrapper">
            <div class="carousel-slides">
                {% for story in featured_stories %}
                <div class="carousel-slide {% if forloop.first %}active{% endif %}">
                    <a href="{% url 'stories:story_detail' story.id %}">
                        {% if story.cover_image %}
                            <img src="{{ story.cover_image.url }}" alt="{{ story.title }}">
                        {% else %}
                            <div class="slide-placeholder">
                                <div class="placeholder-text">{{ story.title|slice:":15" }}{% if story.title|length > 15 %}...{% endif %}</div>
                            </div>
                        {% endif %}
                        <div class="slide-overlay">
                            <div class="slide-content">
                                <h3>{{ story.title }}</h3>
                                <p class="slide-category">{{ story.category.name }}</p>
                                <div class="slide-stats">
                                    <span class="views">👁️ {{ story.view_count }}</span>
                                    <span class="rating">
                                        {% for i in "12345" %}
                                            {% if forloop.counter <= story.average_rating|floatformat:"0"|add:"0" %}
                                                ★
                                            {% else %}
                                                ☆
                                            {% endif %}
                                        {% endfor %}
                                        ({{ story.rating_count }})
                                    </span>
                                    <span class="comments">💬 {{ story.comment_count }}</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                {% endfor %}
            </div>
            
            <!-- 轮播指示器 -->
            {% if featured_stories|length > 1 %}
            <div class="carousel-indicators">
                {% for story in featured_stories %}
                <span class="indicator {% if forloop.first %}active{% endif %}" data-slide="{{ forloop.counter0 }}"></span>
                {% endfor %}
            </div>
            
            <!-- 轮播控制按钮 -->
            <button class="carousel-control prev" id="prevBtn">&#10094;</button>
            <button class="carousel-control next" id="nextBtn">&#10095;</button>
            {% endif %}
        </div>
    </div>
    {% endif %}

    <div class="page-header">
        <h1>精彩故事推荐</h1>
        <p>探索由AI创作的精彩故事世界</p>
    </div>

    <!-- 分类Tab切换 -->
    <div class="category-tabs">
        <ul class="tab-list">
            <li class="tab-item active" data-category="all">全部</li>
            {% for category in categories %}
                <li class="tab-item" data-category="{{ category.name }}">{{ category.name }}</li>
            {% endfor %}
        </ul>
    </div>

    <!-- 故事卡片展示 -->
    <div class="home-story-grid">
        <!-- 全部分类显示 -->
        <div class="category-section" data-category="all" style="display: block;">
            <h2>全部故事</h2>
            <div class="home-story-cards">
                {% for story in all_stories %}
                    <div class="home-story-card">
                        <div class="card-cover">
                            <a href="{% url 'stories:story_detail' story.id %}">
                                {% if story.cover_image %}
                                    <img src="{{ story.cover_image.url }}" alt="{{ story.title }}">
                                {% else %}
                                    <div class="cover-text">{{ story.title|slice:":8" }}</div>
                                {% endif %}
                            </a>
                        </div>
                        <div class="card-content">
                            <h3><a href="{% url 'stories:story_detail' story.id %}">{{ story.title }}</a></h3>
                            <div class="card-meta">
                                <span class="author">作者: {{ story.author.username }}</span>
                                <span class="rating">
                                    <span class="star-rating">
                                        {% for i in "12345" %}
                                            {% if forloop.counter <= story.average_rating|floatformat:"0"|add:"0" %}
                                                ★
                                            {% else %}
                                                ☆
                                            {% endif %}
                                        {% endfor %}
                                    </span>
                                    ({{ story.rating_count }})
                                </span>
                            </div>
                            <p class="card-excerpt">{{ story.content|truncatewords:20 }}</p>
                            <div class="card-footer">
                                <span class="views">👁️ {{ story.view_count }}次浏览</span>
                                <span class="date">{{ story.created_at|date:"Y-m-d" }}</span>
                            </div>
                        </div>
                    </div>
                {% empty %}
                    <div class="no-stories">暂无故事</div>
                {% endfor %}
            </div>
            
            <!-- 分页器 -->
            {% if all_stories.has_other_pages %}
            <div class="pagination-container">
                <div class="pagination">
                    <a href="?page=1" {% if all_stories.number == 1 %}class="disabled"{% endif %}>&laquo; 首页</a>
                    {% if all_stories.has_previous %}
                        <a href="?page={{ all_stories.previous_page_number }}">&lsaquo; 上一页</a>
                    {% else %}
                        <a class="disabled">&lsaquo; 上一页</a>
                    {% endif %}

                    {% for num in all_stories.paginator.page_range %}
                        {% if all_stories.number == num %}
                            <span class="current">{{ num }}</span>
                        {% elif num > all_stories.number|add:'-3' and num < all_stories.number|add:'3' %}
                            <a href="?page={{ num }}">{{ num }}</a>
                        {% endif %}
                    {% endfor %}

                    {% if all_stories.has_next %}
                        <a href="?page={{ all_stories.next_page_number }}">下一页 &rsaquo;</a>
                    {% else %}
                        <a class="disabled">下一页 &rsaquo;</a>
                    {% endif %}
                    <a href="?page={{ all_stories.paginator.num_pages }}" {% if all_stories.number == all_stories.paginator.num_pages %}class="disabled"{% endif %}>末页 &raquo;</a>
                </div>
            </div>
            {% endif %}
        </div>
        
        <!-- 分类Tab内容 -->
        {% for category_name, stories in stories_by_category.items %}
            <div class="category-section" data-category="{{ category_name }}" style="display: none;">
                <h2>{{ category_name }}故事</h2>
                <div class="home-story-cards">
                    {% for story in stories %}
                        <div class="home-story-card">
                            <div class="card-cover">
                                <a href="{% url 'stories:story_detail' story.id %}">
                                    {% if story.cover_image %}
                                        <img src="{{ story.cover_image.url }}" alt="{{ story.title }}">
                                    {% else %}
                                        <div class="cover-text">{{ story.title|slice:":8" }}</div>
                                    {% endif %}
                                </a>
                            </div>
                            <div class="card-content">
                                <h3><a href="{% url 'stories:story_detail' story.id %}">{{ story.title }}</a></h3>
                                <div class="card-meta">
                                    <span class="author">作者: {{ story.author.username }}</span>
                                    <span class="rating">
                                        <span class="star-rating">
                                            {% for i in "12345" %}
                                                {% if forloop.counter <= story.average_rating|floatformat:"0"|add:"0" %}
                                                    ★
                                                {% else %}
                                                    ☆
                                                {% endif %}
                                            {% endfor %}
                                        </span>
                                        ({{ story.rating_count }})
                                </span>
                            </div>
                                <p class="card-excerpt">{{ story.content|truncatewords:20 }}</p>
                                <div class="card-footer">
                                    <span class="views">👁️ {{ story.view_count }}次浏览</span>
                                    <span class="date">{{ story.created_at|date:"Y-m-d" }}</span>
                                </div>
                            </div>
                        </div>
                    {% empty %}
                        <div class="no-stories">暂无{{ category_name }}故事</div>
                    {% endfor %}
                </div>
            </div>
        {% endfor %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 轮播图功能
    let currentSlide = 0;
    const slides = $('.carousel-slide');
    const indicators = $('.indicator');
    const totalSlides = slides.length;
    
    // 切换幻灯片函数
    function showSlide(index) {
        slides.removeClass('active');
        indicators.removeClass('active');
        
        slides.eq(index).addClass('active');
        indicators.eq(index).addClass('active');
        
        currentSlide = index;
    }
    
    // 下一张
    function nextSlide() {
        let next = currentSlide + 1;
        if (next >= totalSlides) {
            next = 0;
        }
        showSlide(next);
    }
    
    // 上一张
    function prevSlide() {
        let prev = currentSlide - 1;
        if (prev < 0) {
            prev = totalSlides - 1;
        }
        showSlide(prev);
    }
    
    // 自动轮播
    let carouselInterval = setInterval(nextSlide, 5000);
    
    // 鼠标悬停时暂停自动轮播
    $('.carousel-wrapper').hover(
        function() {
            clearInterval(carouselInterval);
        },
        function() {
            carouselInterval = setInterval(nextSlide, 5000);
        }
    );
    
    // 点击指示器
    indicators.click(function() {
        const slideIndex = $(this).data('slide');
        showSlide(slideIndex);
    });
    
    // 点击控制按钮
    $('#prevBtn').click(prevSlide);
    $('#nextBtn').click(nextSlide);
    
    // Tab切换功能
    $('.tab-item').click(function() {
        // 移除所有active类
        $('.tab-item').removeClass('active');
        $('.category-section').hide();

        // 添加当前active类
        $(this).addClass('active');

        // 显示对应分类
        var category = $(this).data('category');
        if (category === 'all') {
            $('.category-section[data-category="all"]').show();
        } else {
            $('.category-section[data-category="' + category + '"]').show();
        }
    });
});
</script>
{% endblock %}